<template>
  <div id="footer">
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div class="music-info">
            <div class="music-cover">
              <img v-lazy="musicInfo.picUrl" alt="cover" />
            </div>
            <div class="music-detail">
              <div class="music-name" v-text="musicInfo.name">暂无歌曲</div>
              <div class="ar-name" v-if="musicInfo.ar">
                {{ musicInfo.ar | filterArtists }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light control">
          <el-row
            type="flex"
            justify="center"
            align="middle"
            class="control-btn-box"
          >
            <i class="iconfont icon-random"></i>
            <i @click="lastSong" class="iconfont icon-skip-back"></i>
            <i
              v-show="state.flag"
              @click="playSong"
              class="play-btn iconfont icon-playfill"
            ></i>
            <i
              v-show="!state.flag"
              @click="pauseSong"
              id="pause-btn"
              class="play-btn iconfont icon-pause"
            ></i>
            <i @click="nextSong" class="iconfont icon-skip-forward"></i>
            <i class="iconfont icon-geci"></i>
          </el-row>
          <el-row
            type="flex"
            justify="center"
            align="middle"
            class="time-bar-box"
          >
            <!-- 进度条 -->
            <span class="time">{{
              state.currentTime | formatDate("mm:ss")
            }}</span>
            <div ref="outside" @click="setProgressBar" class="time-bar">
              <div
                ref="timeBar"
                class="time-bar-inside"
                :style="{
                  width: timeBarWidth,
                }"
              ></div>
            </div>
            <span class="time">{{ state.duration | formatDate("mm:ss") }}</span>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple right-box">
          <i class="iconfont icon-play-list-line" @click="showSideBar"></i>
        </div>
      </el-col>
    </el-row>
    <!-- audio元素 -->
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${controller.detail.id}.mp3`"
      autoplay
    ></audio>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqCheckMusic } from "@/api";
export default {
  name: "Footer",
  data() {
    return {
      audio: {},
      state: {
        flag: true,
        currentTime: 0,
        duration: 0,
      },
      musicInfo: {},
      timer: {},
    };
  },
  computed: {
    ...mapState({
      controller: (store) => store.controller.controller,
    }),
    timeBarWidth(){
      return (this.state.currentTime / this.state.duration) * 100 + '%'
    }
  },
  watch: {
    controller: {
      deep: true,
      handler(newValue) {
        // 更新音乐信息
        this.musicInfo.picUrl = newValue.detail.al.picUrl;
        this.musicInfo.ar = newValue.detail.ar;
        this.musicInfo.name = newValue.detail.name;
        // 更新播放标志
        this.state.flag = false;

        // 查看是否有版权
        reqCheckMusic(newValue.detail.id).catch(() => {
          this.$message({
            message: "暂无版权",
            type: "warning",
          });
          // 1.5秒后播放下一首歌
          setTimeout(() => {
            this.nextSong();
          }, 1500);
        });

        // 开启定时器，记录播放时间
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          this.state.currentTime = this.$refs.audio.currentTime * 1000;
          this.state.duration = this.$refs.audio.duration * 1000;
        }, 1000);
      },
    },
  },
  mounted() {
    // 监听音乐播放完毕
    let audio = this.$refs.audio;
    this.audio = audio;
    audio.loop = false;
    audio.addEventListener(
      "ended",
      () => {
        // 播放下一首
        this.$store.dispatch("nextSong");
      },
      false
    );
  },
  methods: {
    // 下一首歌
    nextSong() {
      this.$store.dispatch("nextSong");
    },
    // 上一首歌
    lastSong() {
      this.$store.dispatch("lastSong");
    },
    // 播放
    playSong() {
      let { audio } = this;
      audio.play();
      this.state.flag = audio.paused;
    },

    // 暂停
    pauseSong() {
      let { audio } = this;
      audio.pause();
      this.state.flag = audio.paused;
    },

    // 更新进度条
    setProgressBar() {
      // 计算百分比
      let width = this.$refs.outside.clientWidth
      console.log(event.offsetX,width);
      let percent = event.offsetX / width
      // 计算并设置currentTime
      let audio = this.$refs.audio;
      audio.currentTime = percent * (this.state.duration/1000);
    },

    // 展示右侧边栏
    showSideBar(){
      this.$store.dispatch('showSidebar',!this.$store.state.rightSidebar.isShowSidebar)
    }
  },
};
</script>

<style lang="less">
#footer {
  // background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid #eee;
  padding: 15px;
  position: fixed;
  height: 50px;
  width: auto;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  .music-info {
    display: flex;
    .music-cover {
      width: 50px;
      height: 50px;
      img {
        border-radius: 5px;
        height: 100%;
      }
    }
    .music-detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      i {
        margin-left: 10px;
        font-size: 20px;
      }
      .music-name {
        font-size: 16px;
        display: -webkit-box; /**对象作为伸缩盒子模型展示**/
        -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
        -webkit-line-clamp: 1; /**显示的行数**/
        overflow: hidden; /**隐藏超出的内容**/
      }
      .ar-name {
        font-size: 12px;
        display: -webkit-box; /**对象作为伸缩盒子模型展示**/
        -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
        -webkit-line-clamp: 1; /**显示的行数**/
        overflow: hidden; /**隐藏超出的内容**/
      }
    }
  }
  .control {
    .control-btn-box {
      height: 30px;
      .play-btn {
        background: #eee;
        font-size: 22px;
        padding: 5px;
        border-radius: 50%;
      }
      i {
        cursor: pointer;
        font-size: 22px;
        margin: 0 15px;
      }
    }
    .time-bar-box {
      height: 20px;
      font-size: 12px;
      color: #999;
      .time-bar:hover{
        height: 6px;
      }
      .time-bar {
        border-radius: 6px;
        width: 75%;
        height: 4px;
        background: #eee;
        margin: 0 5px;
        .time-bar-inside {
          border-radius: 6px;
          width: 0;
          height: 100%;
          background: var(--themeColor1);
        }
      }
    }
  }
  .right-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    i {
      cursor: pointer;
      font-size: 22px;
      vertical-align: -20px;
      color: #666;
    }
  }
}
</style>